<template>
    <div class="classify">
        <!-- 搜索 -->
        <Search></Search>
        <!-- 分类 -->
        <van-tree-select height="88vh" :items="items" :main-active-index.sync="active" @click-nav="getLsit">
            <template #content>
                <div class="content">
                    <div class="img">
                        <img v-lazy="currentCategory.banner_url" alt="">
                        <p>{{ currentCategory.front_name }}</p>
                    </div>
                    <Title :txt="currentCategory.name + '分类'"></Title>
                    <div class="list">
                        <van-grid :column-num="3">
                            <van-grid-item v-for="val in currentCategory.subCategoryList " :key="val.id">
                                <img v-lazy="val.wap_banner_url" alt="">
                                <p>{{ val.name }}</p>
                            </van-grid-item>
                        </van-grid>
                    </div>
                </div>
            </template>
        </van-tree-select>

        <!-- 加载动画 -->
        <Location :show="show"></Location>
    </div>
</template>

<script>
import { getCatalog, getCurrent } from '@/api/home.js';
import { Toast } from 'vant';
import Search from '@/components/Search';
import Title from '@/components/AppTitle'
import Location from '@/components/Location'
export default {
    components: {
        Search,
        Title,
        Location,
    },
    data() {
        return {
            show: true,
            categoryList: [],
            currentCategory: {},
            active: 0,
            items: [],
        }
    },
    async created() {
        let res = await getCatalog()
        this.show = false
        let data = res.data.data
        this.categoryList = data.categoryList
        this.items = data.categoryList.map(item => ({ id: item.id, text: item.name }))
        this.currentCategory = data.currentCategory
        // subCategoryList
    },
    methods: {
        async getLsit(index) {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration: 500
            });
            let id = this.categoryList[index].id
            let { data: { data: { currentCategory } } } = await getCurrent({ id })
            this.currentCategory = currentCategory
        }
    }
}
</script>

<style lang="less" scoped>
.classify {
    margin-bottom: 50px;
}

.van-tree-select__content {
    flex: 4;
}

.content {
    .img {
        position: relative;

        img {
            width: 100%;
            height: 150px;
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .title {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        margin-top: 10px;
    }

    .list {
        img {
            width: 100%;
        }
    }
}
</style>